import React, {Component} from 'react';
import {ImageBackground, Linking, StyleSheet} from 'react-native';
import Modal from 'react-native-modalbox';
import {isAndroid, windowWidth} from '../../configs/platform';
// import {addDownListener, upgrade} from 'rn-app-upgrade';
import {Button, Text, View,TouchableOpacity} from 'react-native-ui-lib';
import {commonStyles} from '../../configs/commonStyle';
import { openURL } from '../../utils/util';

/**
 * 升级对话框
 */
export default class UpgradeDialog extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isOpen: true,
            versionInfo: this.props.versionInfo || {},
            upgradingProgress: 0,
        };
    }

    onUpgradeVersion = () => {
        let {versionInfo, upgradingProgress} = this.state;
        if (upgradingProgress > 0) {
            Toast.show('正在为您下载中');
            return;
        }
        if (isAndroid()) {
            if (!versionInfo.downloadUrl || !versionInfo.downloadUrl.length) {
                Toast.show('更新链接不正确、请联系管理员');
                return;
            }
            // addDownListener((progress) => {
            //     const state = progress === 100 ? {upgradingProgress: 0} : {upgradingProgress: progress};
            //     requestAnimationFrame(() => {
            //         this.setState(state);
            //     });

            // });
            // upgrade(versionInfo.downloadUrl);
            Toast.show('正在为您下载中');

        } else {
            if (versionInfo.downloadPage || versionInfo.downloadPage.length) {
                // 私人分发下载地址
                Linking.canOpenURL(versionInfo.downloadPage).then(res => {
                    if (res) {
                        return Linking.openURL(versionInfo.downloadPage).catch(Log);
                    } else {
                        Toast.show(`打开网址：${versionInfo.downloadPage} 异常`);
                    }
                }).catch(e => Log(e.message));
                return;
            }
            Toast.show('请打开appStore安装最新版');
        }
    };

    toOpenDownload = () => {
        let {versionInfo} = this.state;
        if (versionInfo && !IsNullOrEmpty(versionInfo.downloadPage)) {
            // 私人分发下载地址
            Linking.canOpenURL(versionInfo.downloadPage).then(res => {
                if (res) {
                    return Linking.openURL(versionInfo.downloadPage).catch(Log);
                } else {
                    Toast.show(`打开网址：${versionInfo.downloadPage} 异常`);
                }
            }).catch(e => Log(e.message));
            return;
        }
        Toast.show('下载地址不能为空');
    };
    
    toUpgrade = () => {
        const {versionInfo} = this.state
        openURL({url: versionInfo && versionInfo.downloadUrl})
    }

    renderModalContent = () => {

        let {upgradingProgress, versionInfo} = this.state;

        return (

            <View>
                <ImageBackground source={require('../../images/upgrad_top.png')}
                                 style={{width: 262.5, height: 176, justifyContent: 'space-between'}}
                >
                    <View marginT-35 marginL-15>
                        <Text style={commonStyles.text_white_16}>发现新版本</Text>
                        <Text style={commonStyles.text_white_12}>{versionInfo.version}</Text>
                    </View>
                    <View row marginH-15 marginB-10 style={{justifyContent: upgradingProgress > 0 ? 'flex-start' : 'center'}}>
                        {
                            upgradingProgress > 0 ?
                                <Text style={{...styles.progress_text, width: `${upgradingProgress}%`}}>
                                    {upgradingProgress > 5 ? `${upgradingProgress}%` : null}
                                </Text>
                                :
                                <Text style={{color: '#999', lineHeight: 35}}>80%的用户已升级</Text>
                        }
                    </View>
                </ImageBackground>
                <ImageBackground source={require('../../images/upgrade_bottom.png')}
                                 style={{width: 262.5, height: 176}}
                >

                    <View paddingH-15 style={{minHeight:50}}>
                        <Text style={commonStyles.text_black666_14_25} numberOfLines={3}>{versionInfo.remark}</Text>
                    </View>
                    <Button label={upgradingProgress > 0 ? '正在升级中' : '立即升级'}
                            bg-purple
                            marginH-20
                            marginT-20
                            onPress={this.toUpgrade}/>
                    {
                        isAndroid() ?
                            <TouchableOpacity style={{alignSelf: 'center',  paddingVertical: 10}}
                                              onPress={this.toOpenDownload}>
                                <Text style={{...commonStyles.text_black666_12}}>无法下载?点击直接安装</Text>
                            </TouchableOpacity>
                            : null
                    }
                </ImageBackground>
            </View>

        );
    };

    render() {
        const {isOpen} = this.state;
        return (
            <Modal style={[styles.modal]}
                   ref={modal => this.modal = modal}
                   backButtonClose={false}
                   backdropPressToClose={false}
                   onClosed={() => this.setState({isOpen: false})}
                   coverScreen={true}
                   isOpen={isOpen}>
                {this.renderModalContent()}
            </Modal>
        );
    }

}

const styles = StyleSheet.create({
    modal: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'transparent',
    },
    progress_text: {
        color: 'white',
        backgroundColor: '#FF69B4',
        lineHeight: 10,
        fontSize: 9,
        textAlign: 'center',
        borderRadius: 5,
    },
});


